<template>
    <div id="cartwrap">
        <Header></Header>
        <HeaderNav :headerlist="headerlist"></HeaderNav>
        <div class="container">
            <div id="navigation">
            <div class="container">
                <a href="">首页</a>
                <i> > </i>
                <a href="">购物车</a>
            </div>
        </div>
            <div class="cart">
                <table>
                    <thead>
                        <tr>
                            <th width="120">
                                <input type="checkbox" v-model="ckall" @change="checkAll">
                                <span>全选</span>
                            </th>
                            <th width="400">商品信息</th>
                            <th width="220">单价</th>
                            <th width="180"> 数量</th>
                            <th width="180">小计</th>
                            <th width="140">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item, index in $store.state.cart.cartList">
                            <td><input type="checkbox" v-model="item.selected" @change="selecOne(item)"></td>
                            <td>
                                <div class="goods">
                                    <img :src="item.picture" alt="" @click="toShopDetail(item)">
                                    <div>
                                        <p>{{ item.name }}</p>
                                        <div class="cart_skus">
                                            <div class="attrs">
                                                <span>{{ item.attrsText }}</span>
                                            </div>
                                            <!-- <div class="layer">
                                                <div class="goods_skus">
                                                    <dl>
                                                        <dt></dt>
                                                        <dd>
                                                            <img src="" alt="">
                                                            <span></span>
                                                        </dd>
                                                    </dl>
                                                </div>
                                                <button>确认</button>
                                            </div> -->
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p>￥{{ item.price }}</p>
                            </td>
                            <td>
                                <div class="numbox">
                                    <span @click="subtract(item)">-</span>
                                    <input type="text" v-model="item.count">
                                    <span @click="addNum(item)">+</span>
                                </div>
                            </td>
                            <td>
                                <p style="font-size: 16px;  color: #cf4444;">￥{{ item.nowOriginalPrice * item.count }}
                                </p>
                            </td>
                            <td>
                                <p style=" cursor: pointer; user-select: none;">移入收藏夹</p>
                                <p style="color: #27ba9b; cursor: pointer; user-select: none;" :delitem="item" :delshow="delshow" @click="del(item)">删除
                                </p>
                                <p style=" cursor: pointer; user-select: none;">找相似</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="action">
                <div class="batch" style="display: flex;">
                    <div class="ckall">
                        <input type="checkbox" v-model="ckall" @change="checkAll">
                        <span>全选</span>
                    </div>
                    <a href="javascript:;" @click="delchecked">删除商品</a>
                    <a href="javascript:;">移入收藏夹</a>
                    <a href="javascript:;">清空失效商品</a>
                </div>
                <div class="total">
                    <p>共
                        <span>{{ $store.getters.getShopNum }}</span>
                        件商品，已选择
                        <span>{{ $store.getters.getshopchecked }}</span>
                        件，商品合计：
                        <span class="priceAll">￥{{ $store.getters.SumPrice }}</span>
                    </p>
                    <button>下单结算</button>
                </div>
            </div>

        </div>
        <div class="shop_relevant">
            <div class="container">
                <div class="head">
                    <span>同类商品推荐</span>
                </div>
                <div class="carousel">
                    <ul>
                        <li>
                            <div class="slider">
                                <a href="javascript:;" v-for="item in relevantList.slice(n, n + 4)">
                                    <img :src="item.picture" alt="">
                                    <p>{{ item.name }}</p>
                                    <p>{{ item.price }}</p>
                                </a>
                            </div>
                        </li>
                    </ul>
                    <a href="javascript:;" class="left" @click="left()">左</a>
                    <a href="javascript:;" class="right" @click="right()">右</a>
                    <div class="page">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>


        <delSure v-if="delshow"></delSure>
    </div>

</template>
<script>
import Header from '@/page/Main/Header'
import HeaderNav from '@/page/Main/HeaderNav'
import delSure from './del_sure/index.vue'
export default {
    components: {
        Header,
        HeaderNav,
        delSure,
    },
    data() {
        return {
            headerlist: [],
            GoodsList: [],
            cartList: [],
            relevantList: [],
            n: 0,
            ckall: false,
            delshow: false
        }
    },
    methods: {
        // 删除某个
        del(item) {
            // this.delshow = true
            console.log(item);

            var ids = [item.skuId]
            console.log(ids);
            this.axios({
                method:'DELETE',
                url:'https://apipc-xiaotuxian-front.itheima.net/member/cart',
                data:{
                    ids:ids
                },
                headers:{
                    Authorization: 'Bearer ' + this.$store.state.userInfor.a.token
                }
            }).then(res=>{
                this.getshopCart()
            })
        },
        // 删除选中
        delchecked(){
            var ids = [];
            this.$store.state.cart.cartList.forEach(i=>{
                if(i.selected == true){
                    ids.push(i.skuId)
                }
            })
            this.axios({
                method:'DELETE',
                url:'https://apipc-xiaotuxian-front.itheima.net/member/cart',
                data:{
                    ids:ids
                },
                headers:{
                    Authorization: 'Bearer ' + this.$store.state.userInfor.a.token
                }
            }).then(res=>{
                this.getshopCart()
            })
        },
        left() {
            this.n -= 4
            if (this.n == -4) {
                this.n = 12
            }

        },
        right() {
            this.n += 4
            if (this.n == 16) {
                this.n = 0
            }
        },
        // 调接口，全选状态
        getshopCart() {
            var token = this.$store.state.userInfor.a.token
            // console.log(token);
            this.axios({
                method: 'GET',
                url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
                headers: {
                    Authorization: 'Bearer ' + token
                },
            }).then(res => {
                if (res.data.msg == '操作成功') {
                    this.$store.commit('getcart', res.data.result)

                    var bool = true
                    res.data.result.forEach(i => {
                        // console.log(i);
                        if (i.selected == false) {
                            bool = false
                        }
                    })
                    this.ckall = bool
                }
            })
        },

        // 反选
        selecOne(item) {
            var token = this.$store.state.userInfor.a.token
            // // // console.log(token);
            // this.axios({
            //     method: 'PUT',
            //     url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart/'+item.id,
            //     headers: {
            //         Authorization: `Bearer ${token}`
            //     },
            // }).then(res=>{
            //     console.log(res);
            // })
            // console.log(token);
            this.axios.put('https://apipc-xiaotuxian-front.itheima.net/member/cart/' + item.skuId,
                { selected: item.selected },
                { headers: { 'Authorization': 'Bearer ' + token } }
            ).then(res => {
                if (res.data.msg != '操作成功') {
                    getshopCart()
                }
                // 
                if (res.data.msg == '操作成功') {
                    var bool = true
                    this.$store.state.cart.cartList.forEach(i => {
                        // console.log(i);
                        if (i.selected == false) {
                            bool = false
                        }
                    })
                    this.ckall = bool
                }
            })
        },
        // 全选
        checkAll() {
            var ids = [];
            this.$store.state.cart.cartList.forEach(i => {
                ids.push(i.skuId)
            })
            console.log(ids);

            this.axios({
                method: 'PUT',
                url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart/selected',
                data: {
                    ids: ids,
                    selected: this.ckall,
                },
                headers: {
                    Authorization: 'Bearer ' + this.$store.state.userInfor.a.token
                },
            }).then(res => {
                if (res.data.msg == '操作成功') {

                    this.getshopCart()

                }
            })
        },
        // 减数量
        subtract(item) {
            this.axios({
                method: 'PUT',
                url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart/' + item.skuId,
                data: {
                    count: item.count-1
                },
                headers:{
                    Authorization: 'Bearer ' + this.$store.state.userInfor.a.token
                }
            }).then(res=>{
                this.getshopCart()
            })
        },
        // 加数量
        addNum(item) {

            this.axios({
                method: 'PUT',
                url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart/' + item.skuId,
                data: {
                    count: item.count+1
                },
                headers:{
                    Authorization: 'Bearer ' + this.$store.state.userInfor.a.token
                }
            }).then(res=>{
                this.getshopCart()
            })
        },
        // 点击图片跳转商品详情页
        toShopDetail(item){
            // console.log(item.id);
            this.$router.push('/shopdetail/'+item.id)
        }
    },
    mounted() {
        this.getshopCart()
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then(res => {
            if (res.data.msg == '操作成功') {
                this.headerlist = res.data.result  // 头部导航
                this.mainList = res.data.result  // 选项卡
            }
        })
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/goods').then((res) => {
            if (res.data.msg == '操作成功') {
                this.GoodsList = res.data.result
            }
        })
        this.$store.state.cart.cartList.forEach(item => {
            this.$set(item, 'checked', false)
            // console.log(item, item.checked);
        })
        this.cartList = this.$store.state.cart.cartList

        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/goods/relevant?id=3380014&limit=16').then(res => {
            if (res.data.msg == '操作成功') {
                this.relevantList = res.data.result
                // console.log(this.relevantList.slice(0, 4));
            }
        })
        // console.log(this.$store.getters);
        // console.log(this.$store.state.cart.cartList);
    },
        //组件内，前置路由守卫，进入当前路由组件中触发
    beforeRouteEnter(to,from,next){
        console.log(to,from);
        next()
    },
    beforeRouteLeave(to,from,next){
        console.log(to,from)
        next()
    }
}
</script>
<style lang="scss" scoped>
#cartwrap {
    background: #f5f5f5;
}
// 面包屑导航
#navigation {
    display: flex;
    padding: 25px 10px;

    a {
        color: #666;
        transition: all .4s;
    }

    i {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 5px;
        line-height: 22px;
    }
}
.txt {
    display: flex;
    padding: 25px 10px;
}

.cart {
    background: #fff;
    color: #666;


    table {
        border-spacing: 0;
        border-collapse: collapse;
        line-height: 24px;

        thead {
            th {
                padding: 10px;
                border-bottom: 1px solid #f5f5f5;
                font-size: 16px;
                font-weight: 400;
                line-height: 50px;

                span {
                    margin-left: 2px;
                }
            }
        }
    }

    tbody {
        tr {
            td {
                padding: 10px;
                border-bottom: 1px solid #f5f5f5;
                text-align: center;

                &:nth-of-type(1) {
                    text-align: left;
                    padding-left: 30px;
                    color: #999;
                }

                &:nth-of-type(2) {
                    text-align: left;
                }

                .goods {
                    display: flex;
                    align-items: center;

                    img {
                        width: 100px;
                        height: 100px;
                    }

                    &>div {
                        width: 280px;
                        font-size: 16px;
                        padding-left: 10px;

                        p {
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }

                        .cart_skus {
                            position: relative;
                            height: 28px;
                            border: 1px solid #f5f5f5;
                            padding: 0 6px;
                            margin-top: 10px;
                            display: inline-block;

                            .attrs {
                                line-height: 24px;
                                display: flex;

                                span {
                                    max-width: 230px;
                                    font-size: 14px;
                                    color: #999;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                            }

                            .layer {
                                position: absolute;
                                left: -1px;
                                top: 40px;
                                z-index: 10;
                                width: 400px;
                                border: 1px solid #27ba9b;
                                box-shadow: 2px 2px 4px #e6faf6;
                                background: #fff;
                                border-radius: 4px;
                                font-size: 14px;
                                padding: 20px;

                                &::before {
                                    content: "";
                                    width: 12px;
                                    height: 12px;
                                    border-left: 1px solid #27ba9b;
                                    border-top: 1px solid #27ba9b;
                                    position: absolute;
                                    left: 12px;
                                    top: -8px;
                                    background: #fff;
                                    transform: scaleX(.8) rotate(45deg);
                                }

                                .goods_skus {
                                    padding-left: 10px;
                                    padding-top: 20px;

                                    dl {
                                        display: flex;
                                        padding-bottom: 10px;
                                        align-items: center;

                                        dt {
                                            width: 50px;
                                            color: #999;
                                        }

                                        dd {
                                            flex: 1;
                                            color: #666;
                                            line-height: 40px;

                                            img {
                                                border-color: #27ba9b;
                                            }
                                        }
                                    }
                                }

                                button {
                                    margin-left: 60px;
                                    border-color: #27ba9b;
                                    background: #27ba9b;
                                    color: #fff;
                                    width: 60px;
                                    height: 32px;
                                    font-size: 14px;
                                }
                            }
                        }
                    }

                }

                .numbox {
                    margin: 0 auto;
                    width: 120px;
                    display: flex;
                    align-items: center;
                    height: 30px;
                    border: 1px solid #e4e4e4;

                    span {
                        width: 29px;
                        line-height: 28px;
                        text-align: center;
                        background: #f8f8f8;
                        font-size: 16px;
                        color: #666;
                        user-select: none;
                        cursor: pointer;

                        &:nth-of-type(1) {
                            border-right: 1px solid #e4e4e4;
                        }

                        &:nth-of-type(2) {
                            border-left: 1px solid #e4e4e4;
                        }
                    }

                    input {
                        width: 60px;
                        padding: 0 5px;
                        text-align: center;
                        color: #666;
                        border: none;
                    }
                }
            }
        }
    }
}

.action {
    display: flex;
    background: #fff;
    margin-top: 20px;
    height: 80px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    padding: 0 30px;

    .ckall {
        color: #999;

        span {
            margin-left: 2px;
        }
    }

    a {
        margin-left: 20px;
    }

    .total {
        display: flex;
        align-items: center;

        .priceAll {
            font-size: 18px;
            margin-right: 20px;
            font-weight: 700;
            color: #cf4444;
        }

        button {
            border-color: #27ba9b;
            background: #27ba9b;
            color: #fff;
            width: 180px;
            height: 50px;
            font-size: 16px;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 4px;
            cursor: pointer;
        }
    }

}

.shop_relevant {
    .container {
        background: #fff;
    }
}

.shop_relevant {

    min-height: 460px;
    margin-top: 20px;

    .head {
        height: 80px;
        line-height: 80px;
        padding: 0 20px;

        span {
            font-size: 20px;
            padding-left: 10px;
        }
    }

    .carousel {
        position: relative;
        height: 380px;

        ul {
            width: 100%;
            height: 100%;

            .fase {
                opacity: 1;
                z-index: 1;
            }

            li {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 1;
                transition: opacity .5s linear;

                .slider {
                    display: flex;
                    justify-content: space-around;
                    padding: 0 40px;

                    a {
                        width: 240px;
                        text-align: center;

                        img {
                            padding: 20px;
                            width: 230px !important;
                            height: 230px !important;
                        }

                        p {
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;

                            &:nth-of-type(1) {
                                font-size: 16px;
                                color: #666;
                                padding: 0 40px;
                            }

                            &:nth-of-type(2) {
                                font-size: 16px;
                                color: #cf4444;
                                margin-top: 15px;
                            }
                        }
                    }
                }
            }
        }

        .page {
            position: absolute;
            left: 0;
            bottom: 20px;
            z-index: 2;
            width: 100%;
            text-align: center;

            .active {
                background: #27ba9b;
            }

            span {
                display: inline-block;
                width: 12px;
                height: 12px;
                background: rgba(0, 0, 0, .2);
                border-radius: 50%;
                cursor: pointer;
                margin-left: 12px;
            }
        }

        .left {
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, .2);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 228px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 0;
            transition: all .5s;
            top: 110px;
            opacity: 1;
            background: transparent;
            color: #ddd;
            left: 20px;
        }

        .right {
            right: 20px;
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, .2);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 228px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 0;
            transition: all .5s;
            top: 110px;
            opacity: 1;
            background: transparent;
            color: #ddd;
        }
    }
}
</style>